<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('费用类型') }}</span>
    </div>
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
    >
      <el-form-item :label="$t('类型标识')" prop="typeIdentifier">
        <el-input v-model="queryParams.typeIdentifier" :placeholder="$t('类型标识')" clearable size="small" @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item :label="$t('使用位置')" prop="useLocation">
        <el-input v-model="queryParams.useLocation" :placeholder="$t('使用位置')" clearable size="small" @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:subjects:edit']" type="primary" icon="el-icon-plus" size="mini" @click="addHandle">{{ $t("新增") }}</el-button>
      </el-col>
      <!--
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:subjects:export']" type="warning" icon="el-icon-download" size="mini" @click="exportHandle">{{ $t("导出") }}</el-button>
      </el-col>
      -->
    </el-row>

    <el-table v-loading="loading" :data="fdSubjectsList" border>
      <el-table-column :label="$t('类型标识')" align="center" prop="typeIdentifier">
        <template slot-scope="scope">
          <span class="link-type" @click="updateHandle(scope.$index, scope.row)">{{ scope.row.typeIdentifier }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('使用位置')" align="center" prop="useLocation">
        <template slot-scope="scope">
          <span>{{ $t(scope.row.useLocation) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('费用报销')" align="center" prop="remark" /> -->
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['system:subjects:edit']" size="small" type="text" icon="el-icon-edit" @click="updateHandle(scope.$index, scope.row)">{{ $t('修改') }}</el-button>
          <el-button v-hasPermi="['system:subjects:remove']" size="small" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row)">{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="$t('费用类型')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fdSubjectsForm ref="fdSubjectsForm" />
    </el-dialog>
  </div>
</template>

<script>
	import {
		listFdSubjects,
		// getFdSubjects,
		delFdSubjects,
		// saveFdSubjects,
		// updateFdSubjects,
		exportFdSubjects
	} from '@/api/fd/config/fdSubjects'
	import fdSubjectsForm from './fdSubjectsForm.vue'
	export default {
		components: {
			fdSubjectsForm
		},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 【请填写功能名称】表格数据
				fdSubjectsList: [],
				// 弹出层标题
				title: '',
				// 是否显示弹出层
				formOpen: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					typeIdentifier: undefined,
					useLocation: undefined
				},
				// 表单参数
				form: {
				// 菜单表格结构数据
				menusTable: []
				},
				// 表单校验
				rules: {}
			}
		},
		created() {
			this.getList()
		},

		methods: {

			/** 查询【请填写功能名称】列表 */
			getList() {
				this.loading = true
				listFdSubjects(this.queryParams).then(response => {
					this.fdSubjectsList = response.rows
					this.total = response.total
					this.loading = false
				})
			},

			// 表单重置
			reset() {
				this.form = {
					id: undefined,
					typeIdentifier: undefined,
					useLocation: undefined,
					remark: undefined,
					createBy: undefined,
					createTime: undefined,
					updateBy: undefined,
					updateTime: undefined,
					delFlag: undefined
				}
				this.resetForm('form')
			},
			/** 搜索按钮操作 */
			queryHandle() {
				this.queryParams.pageNum = 1
				this.getList()
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm('queryForm')
				this.queryHandle()
			},
			/** 新增按钮操作 */
			addHandle() {
				this.formOpen = true
				this.$nextTick(() => {
					this.$refs.fdSubjectsForm.init(null)
					console.log(this)
					this.$refs.fdSubjectsForm.isDisabled = false
				})
			},
			/** 修改按钮操作 */
			updateHandle(index, row) {
				this.formOpen = true
				this.$nextTick(() => {
					this.$refs.fdSubjectsForm.$refs.form.clearValidate()
					this.$refs.fdSubjectsForm.init(row.id)
				})
			},
			/** 删除按钮操作 */
			deleteHandle(row) {
				this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
						confirmButtonText: this.$t('确定'),
						cancelButtonText: this.$t('取消'),
						type: 'warning'
					})
					.then(function() {
						return delFdSubjects(row.id)
					})
					.then(() => {
						this.getList()
						this.msgSuccess(this.$t('删除成功'))
					})
					.catch(function() {})
			},
			/** 导出按钮操作 */
			exportHandle() {
				const queryParams = this.queryParams
				this.$confirm(this.$t('是否确认导出?'), this.$t('警告'), {
						confirmButtonText: this.$t('确定'),
						cancelButtonText: this.$t('取消'),
						type: 'warning'
					})
					.then(function() {
						return exportFdSubjects(queryParams)
					})
					.then(response => {
						this.download(response.msg)
					})
					.catch(function() {})
			}
		}
	}
</script>
